<template>
  <div>
    <div class="outmain ba_f">
      <!--            <div class="maintitle">基础设置</div>-->
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>基础设置</span>
        </div>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <el-form-item label="平台名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入平台名称"></el-input>
          <div class="yb_margin lh16">此平台名称仅显示在首页头部标题</div>
        </el-form-item>
        <el-form-item label="平台LOGO" prop="icon">
          <div class="uploadSource bor_de rel flex curs" v-if="form.icon">
            <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
              <i class="el-icon-check" ref="imgicon1"></i>
              <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
            </label>
            <img :src="form.icon" @click="test(1)" class="wid" />
          </div>
          <div class="uploadSource flex-center curs" v-else @click="test(1)">
            <i class="el-icon-plus fon_40 color_d9"></i>
          </div>
        </el-form-item>
        <el-form-item label="平台联系方式">
          <el-input v-model.trim="form.tel" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="平台简介" prop="introduction">
          <el-input type="textarea" v-model.trim="form.introduction" :rows="4" placeholder="请输入平台简介"></el-input>
        </el-form-item>
        <el-form-item label="腾讯key" prop="txKey">
          <el-input v-model.trim="form.txKey" placeholder="请输入腾讯key"></el-input>
          <div class="yb_margin lh16">
            申请地址：https://lbs.qq.com/console/mykey.html?console=mykey；请在小程序后台-开发-开发设置-服务器域名中，将
            <span class="color-red">apis.map.qq.com</span>添加到合法域名中
          </div>
        </el-form-item>
        <el-form-item label="懒加载图标">
          <div class="uploadSource bor_de rel flex" v-if="form.loadIcon">
            <label class="statusLabel curs" @mouseenter="enter(2)" @mouseleave="leave(2)">
              <i class="el-icon-check" ref="imgicon2"></i>
              <i class="el-icon-close" @click="deleteMultiImage(form.loadIcon,2)"></i>
            </label>
            <img :src="form.loadIcon" @click="test(2)" class="wid" />
          </div>
          <div class="uploadSource flex-center curs" v-else @click="test(2)">
            <i class="el-icon-plus fon_40 color_d9"></i>
          </div>
        </el-form-item>
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>分享设置</span>
          </div>
        </div>
        <el-form-item label="转发标题">
          <el-input v-model="form.forwardTitle" placeholder="请输入转发标题"></el-input>
          <div class="yb_margin lh16">分享给好友展示的内容</div>
        </el-form-item>
        <el-form-item label="转发封面">
          <div class="uploadSource bor_de rel flex" v-if="form.forwardIcon">
            <label class="statusLabel curs" @mouseenter="enter(3)" @mouseleave="leave(3)">
              <i class="el-icon-check" ref="imgicon3"></i>
              <i class="el-icon-close" @click="deleteMultiImage(form.forwardIcon,3)"></i>
            </label>
            <img :src="form.forwardIcon" @click="test(3)" class="wid" />
          </div>
          <div class="uploadSource flex-center curs" v-else @click="test(3)">
            <i class="el-icon-plus fon_40 color_d9"></i>
          </div>
        </el-form-item>
        <el-form-item label="分享标题">
          <el-input v-model="form.shareTitle" placeholder="请输入分享标题"></el-input>
          <div class="yb_margin lh16">分享到朋友圈展示的内容</div>
        </el-form-item>
        <el-form-item label="分享封面">
          <div class="uploadSource bor_de rel flex" v-if="form.shareIcon">
            <label class="statusLabel curs" @mouseenter="enter(4)" @mouseleave="leave(4)">
              <i class="el-icon-check" ref="imgicon4"></i>
              <i class="el-icon-close" @click="deleteMultiImage(form.shareIcon,4)"></i>
            </label>
            <img :src="form.shareIcon" @click="test(4)" class="wid" />
          </div>
          <div class="uploadSource flex-center curs" v-else @click="test(4)">
            <i class="el-icon-plus fon_40 color_d9"></i>
          </div>
        </el-form-item>
      </el-form>
      <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
      <attachment-img ref="img2" type="img" @attachment="imgadd2"></attachment-img>
      <attachment-img ref="img3" type="img" @attachment="imgadd3"></attachment-img>
      <attachment-img ref="img4" type="img" @attachment="imgadd4"></attachment-img>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>
<script>
import attachmentImg from '@/plugins/attachment-img';
import { getConfig, postConfig } from '@/api/setup';

export default {
  components: { attachmentImg },
  created() {
    this.bus.$emit('loading', true);
    this.init();
  },
  // created() {
  //     this.$nextTick(async() => {
  //         const {data} = await getConfig({ident:'system'});
  //         this.$nextTick(() => {
  //             this.form2 = this.form
  //             this.form = Object.assign(this.form2, data);
  //         })
  //
  //     });
  // },
  data() {
    return {
      showCard: false,
      form: {
        name: '',
        icon: '',
        tel: '',
        introduction: '',
        txKey: '',
        loadIcon: '',
        shareTitle: '',
        shareIcon: '',
        forwardTitle: '',
        forwardIcon: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入平台名称', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        icon: [{ required: true, message: '请上传平台LOGO', trigger: 'blur' }],
        introduction: [{ required: true, message: '请填写平台简介', trigger: 'blur' }],
        txKey: [{ required: true, message: '请填写腾讯地图key', trigger: 'blur' }]
      }
    };
  },
  methods: {
    async init() {
      const { data } = await getConfig({ ident: 'system' });
      localStorage.setItem('plateformData', JSON.stringify(data));
      this.form2 = this.form;
      this.form = Object.assign(this.form2, data);
      this.bus.$emit('loading', false);
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    test(i = 0) {
      // console.log(this.$refs, i)
      this.$refs['img' + i].dialogVisible = true;
    },
    imgadd1(url) {
      this.form.icon = url.str;
    },
    imgadd2(url) {
      this.form.loadIcon = url.str;
    },
    imgadd3(url) {
      this.form.forwardIcon = url.str;
    },
    imgadd4(url) {
      this.form.shareIcon = url.str;
    },
    deleteMultiImage(item, index, type) {
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (type == 'multigraph') {
        switch (index) {
          case 5:
            this.form2.environment.remove(item);
            break;
        }
      } else {
        switch (index) {
          case 1:
            this.form.icon = '';
            break;
          case 2:
            this.form.loadIcon = '';
            break;
          case 3:
            this.form.forwardIcon = '';
            break;
          case 4:
            this.form.shareIcon = '';
            break;
        }
      }
    },
    submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.form.ident = 'system';
          const { msg } = await postConfig(this.form);
          this.$baseMessage(msg, 'success');
          this.init();
        } else {
          return false;
        }
      });
    }
  }
};
</script>
